<script setup>
</script>

<template>
  <div id="main_div">
    <!--  margin: 50px auto设置上下外边距为50. 此时出现了粘连问题： 上一级的div和这个el-card都往下移动了50px。这时就需要给上一级标签div设置overflow:hidden;  -->
    <el-card style="width: 500px; height: 300px;margin: 50px auto">
      <!--  label-width="80px"设置label的宽度为80px(用于设置所有的el-form-item中的label的宽度)。  -->
      <el-form label-width="80px"  style="margin-top: 50px;width: 430px">
        <el-form-item label="用户名">
          <el-input placeholder="请输入用户名"  v-model="user.username" ></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="password" placeholder="请输入密码"  v-model="user.password" ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login()" style="position: relative;right: 30px">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
  export  default {
    name : "LoginView",
    data(){
      return {
        user: {username:"", password:""}
      }
    },
    methods: {
      login(){
        let data=this.qs.stringify(this.user);//需要导入qs框架
        this.axios.post("http://localhost:8088/users/login", data).then((response)=>{
          //response代表响应对象response.data服务器响应的数据
          //response.data=服务器响应的JsonResult对象
          if(response.data.code === 1){
            this.$message({
              message: "登录成功",
              type: "success"
            });
            //把服务器响应的个人信息保存
            localStorage.setItem("user", JSON.stringify(response.data.data));
            //response.data.data数据不能保存在localStorage(里边只能保存字符串),所以要用JSON.stringify()将对象转换为字符串*/
            //跳转到个人中心页面
            location.href='/personal/index';
            //不能用this.$router.push('/personal/index'); 进入到个人中心页面
            // 这里返回首页如果采用this.$router.push()方式只会改变router-view标签部分的内容，上边下边共同的部分不会改变(只让中间的router-view标签部分变成了首页内容)。
            // 还有一个问题就是：如果采用this.$router.push()方式页面上边的登录注册按钮不会发生变化(实际上登录成功后，登录注册按钮应该不显示，而显示个人头像)
            //location.href='http://localhost:9090/index';
          }else{
            this.$message.error(response.data.msg);
          }
        })
      }
    }
  }
</script>

<style scoped>
  #main_div{
    height: 500px;
    background-size: cover;/**设置背景图像的尺寸，背景图像的尺寸是按其原始尺寸显示的(图片作为封面)*/
    background-position: center;/**设置背景图像的显示位置，居中显示*/
    background-image: url('/public/imgs/loginbg.gif');
    /**写在style的样式中的背景图，需要从public文件夹路径开始写，否则没效果(如果写在div的style属性中，需要把public文件夹的文件夹名去掉)
    (报错，是因为iea的问题)*/
    overflow: hidden;/**解决粘连问题*/
  }
</style>